<template>
    <div class="water-wrapper">
        <div class="optionName">
            <el-button type="primary"><slot name="optionName">温度</slot></el-button>
        </div>
        <div class="optionValue">
            <slot name="optionValue">10°C</slot>
        </div>
        <div class="optionTitle">
            <slot name="optionTitle">合格</slot>
        </div>
    </div>
</template>

<script>
    export default {
        name: "waterForecastitem"
    }
</script>

<style scoped lang="scss">
    .water-wrapper{
        height: 1rem;
        width: auto;
        display: flex;
        justify-content: space-around;
        .optionName{
            display: flex;
            align-items: center;
        }
        .optionValue{
            display: flex;
            align-items: center;
            margin-left: 0.25rem;
            font-size: 0.2rem;
        }
        .optionTitle{
            display: flex;
            align-items: center;
            margin-left: 0.25rem;
            font-size: 0.2rem;
            color: #1a92d7;
        }
    }
</style>
